*{
    padding: 0;
    margin: 0;
}


.app-1{
    position: fixed;
    width: 84px;
    height: 460px;
    background-color:white;
    right: 0;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(5,20%);
    .app-2{
        display: flex;
        flex-direction: column;
        align-items: center;
        img{
            margin-top: 20px;
            width: 30px;
            height: 30px;
        }
        span{
            font-size: 14px;
        }
    }
}
nav{
    height: 40px;
    background-color: #333333;
    .nav-1{
        width: 1226px;
        margin: auto;
        height: 40px;
        display: flex;
        align-items: center;
        a{
            display: block; 
            font-size: 12px;
            color: #b0b0b0;
            text-decoration: none;
            position: relative;
            margin-right: 15px;
            &:hover{
                color: white;
            }
            &::after{
                content: '';
                position: absolute;
                width: 1px;
                height: 12px;
                background-color: #b0b0b0;
                left: 117%;
                top: 15%;
                opacity: 0.1;
                
            }
            &:nth-child(13)::after,&:nth-child(17)::after{
                display: none;
            }
            &:nth-child(14){
                margin-left: 156px;
                
            }
            .gouwuche{
                width: 120px;
                height: 40px;
                background-color: #424242;
                display: flex;
                align-items: center;
                position: relative;
                span{
                    color: #b0b0b0;
                    font-size: 20px;
                }
                &:hover .gouwuche-1{
                    height: 100px;
                    transition: all 0.2s linear;
                }
                .gouwuche-1{
                    
                    position: absolute;
                    width: 316px;
                    height: 0px;
                    background-color: #ffffff;
                    color: #b0b0b0;
                    overflow: hidden;
                    line-height: 100px;
                    text-align: center;
                    top: 40px;
                    left: -196px;
                    span{
                        font-size: 12px;
                    }
                   
                }
            }
            &:nth-child(11){
                position: relative;
                &:hover >.xiazai-1{
                    height: 148px;
                    transition: all 0.2s linear;

                }
                .xiazai-1{
                    
                    top: 170%;
                    left: -75%;
                    width: 124px;
                    height: 0px;
                    position: absolute;
                    background-color:#ffffff;
                    text-align: center;
                    font-size: 14px;
                    color: #333333;
                    overflow: hidden;
                   
                    img{
                        margin-top: 15px;
                        width: 90px;
                        height: 90px;
                    }
                    span{
                        display: block;
                    }

    
                }

            }
            
        }
    }
}

.clearfix::after,.clearfix::before{
    display: table;
    content: '';
    clear: both;
}
header{
    width: 1226px;
    height: 100px;
    background-color: #ffffff;
    margin: auto;
    display: flex;
    align-items: center;
    
    

    a{
        font-size: 16px;
        color: #333;
        text-decoration: none;
        margin-right: 20px;
        position: relative;
        &:hover .xiaomi-1{
            height: 231px;
            transition: all 0.5s linear;
            border-top: 1px solid gainsboro;
        }
        .xiaomi-1{
            z-index: 1;
            top: 290%;
            left: -450%;
            background-color:#ffffff;
            position: absolute;
            width: 1519.2px;
            height: 0px;
            overflow: hidden;
            .xiaomi-11{
                margin: auto;
                width: 1226px;
                height: 230px;
                grid-template-columns: repeat(6,16.6666%);
                display: grid;
                grid-template-rows: 100%;
                .box{
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    position: relative;
                    &:nth-child(1)::after{
                        display: none;
                    }
                    &::after{
                        content: '';
                        position: absolute;
                        width: 1px;
                        height: 110px;
                        background-color: gainsboro;
                        top: 30px;
                    }
                    img{
                        margin: 25px;
                        width: 160px;
                        height: 110px;

                    }
                    span{
                        font-size: 12px;
                        display: block;
                        &:nth-child(2){
                            color: #333333;
                        }
                        &:nth-child(3){
                            color: #ff6700;
                        }
                    }
                }
            }
            
        }
        &:nth-child(3){
            .xiaomi-1{
                left: -565%;
            }
        }
        &:nth-child(4){
            .xiaomi-1{
                left: -1860%;
            }
        }
        &:nth-child(5){
            .xiaomi-1{
                left: -1330%;
            }
        }
        &:nth-child(6){
            .xiaomi-1{
                left: -2230%;
            }
        }
        &:nth-child(7){
            .xiaomi-1{
                left: -2390%;
            }
        }
        &:nth-child(8){
            .xiaomi-1{
                left: -830px;
            }
        }
        &:nth-child(9){
            .xiaomi-1{
                left: -880px;
            }
        }


       
        
    }
    img{
        width: 56px;
        height: 56px;
        margin-right: 178px;
        &:nth-of-type(2){
            width: 52px;
            height: 50px;
            border: 1px solid gainsboro;
            margin-right: 0px;
        }

    }
    input{
        padding-left: 10px;
        width: 235px;
        height: 50px;
        border:1px solid gainsboro;
        
    }
}




// 主要内容
.main{
    width: 1226px;
    height: 460px;
    margin: auto;
    display: flex;
    .main-left{
        position: relative;
        width: 234px;
        height: 420px;
        padding: 20px 0;
        background-color: #a19f9f;
        font-size: 14px;
        list-style: none;
        li{
            line-height: 42px;
            padding-left: 30px;
           &:hover .main1{
               display: block;
           }
           .main1{
                display: none;
                position: absolute;
                width: 992px;
                height: 460px;
                top: 0;
                left: 234px;
                background-color: white;
                z-index: 1;
                .box1-1{
                    width: 992px;
                    height: 460px;
                    display: grid;
                    grid-template-columns: repeat(4,25%);
                    grid-template-rows: repeat(6,16.66%);
                    .box1{
                        align-items: center;
                        display: flex;
                        img{
                            margin: 0 12px 0 20px;
                            width: 40px;
                            height: 40px;
                        }
                    }
    
                }
                
            
            }
            
            a{
                
                color: #ffffff;
                text-decoration: none;
                position: relative;
                &::after{
                    content: '>';
                    position: absolute;
                    left: 170px;
                }
            
            }
            &:hover{
                background-color: #ff6700;
            }
           
        }
        
    }
    .main-right{
        width: 992px;
        height: 460px;
        position: relative;
        overflow: hidden;

        .lbt{
            width: 300%;
            height: 460px;
            position: absolute;
            display: flex;
            animation: lbt 4s 1s steps(1,start) infinite;
            img{
                width: 33.333%;
                height: 100%;

            }
        }
        .lbt-dian{
            position: absolute;
            width: 50px;
            height: 10px;
            overflow: hidden;
            top: 400px;
            left: 900px;
            
            .dian-1{
                display: flex;
                width: 100px;
                height: 10px;
                justify-content: space-between;
                animation: lbt-2 4s 1s steps(1,start) infinite;

                .dian{
                    
                    &:nth-child(3){
                        background-color: ghostwhite;
                    }
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background-color: black;
                }
            }
        }
    }
}
@keyframes lbt{
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(-33.33%);

    }
    100%{
        transform: translateX(-66.66%);
    }
}
@keyframes lbt-2{
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(-16.66%);

    }
    100%{
        transform: translateX(-33.32%);
    }
}





.pic-1{
    position: relative;
    top: 20px;
    width: 1226px;
    height: 170px;
    margin: auto;
    display: grid;
    grid-template-columns: 234px repeat(3,316px);
    grid-template-rows: 100%;
    gap: 14.6px;
    .pic-1-1{
        img{
            width: 100%;
            height: 100%;
        }
    }
    .pic-1-2{
        display: grid;
        grid-template-columns: repeat(3,33.33%);
        grid-template-rows: repeat(2,50%);
        background-color: #5f5750;
        font-size: 12px;
        color: #ffffff;
        
        
        
        img{
            margin-left: 35%;
            margin-top: 20px;
            width: 24px;
            height: 24px;
        }
        span{
            display: block;
            margin-left: 20%;
        }
        
    }
}

.pic-2{
    margin-top: 40px;
    width: 100%;
    height: 160px;
    background-color: #f5f5f5;
    .pic-2-1{
        width: 1226px;
        height: 120px;
        margin: auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
}


.title-1{
    width: 100%;
    height: 57.6px;
    padding-top: 20px;
    background-color: #f5f5f5;
    .title-1-1{
        width: 1226px;
        height: 57.6px;
        margin: auto;
        display: flex;
        align-items: center;
        h2{
            font-size: 22px;
            color: #333333;
        }
        a{
            margin-left: 1100px;
            color: #333333;
            font-size: 16px;
            text-decoration: none;
        }
    }
}

.pic-3{
    width: 100%;
    height: 614px;
    background-color: #f5f5f5;
    .pic-3-1{
        margin: auto;
        width: 1226px;
        display: grid;
        grid-template-columns: repeat(5,234px);
        grid-template-rows: repeat(2,300px);
        row-gap: 14px;
        justify-content: space-between;
        
        .box5{
            &:hover{
                box-shadow: 0 0 5px gray;
                transform: translateY(-5px);
            }
            grid-row: 1/3;
            grid-column: 1/2;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .box6{
            &:hover{
                box-shadow: 0 0 5px gray;
                transform: translateY(-3px);
            }
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            h3{
                font-size: 14px;
            }
            img{
                margin-top: 20px;
                width: 160px;
                height: 160px;
            }
            p{
                font-size: 12px;
                margin: 0 10px 10px;
                &:nth-child(4){
                    color: #ff6700;
                    font-size: 14px;
                    margin: 0 10px 14px;
                }
            }
        }
    }

}
.fenge{
    height: 20px;
    background-color:#f5f5f5;
}

footer{
    width: 1226px;
    height: 330px;
    margin: auto;
    .f1{
        height: 26px;
        padding: 27px 0px;
        border-bottom: 1px solid gainsboro;
        display: flex;
        
        .f11{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 243px;
            height: 26px;
            position: relative;
            font-size: 16px;
            &:nth-child(5)::after{
                display: none;
            }
            img{
                width: 24px;
                height: 24px;
            }
            &::after{
                content: '';
                width: 1px;
                height: 26px;
                background-color: gainsboro;
                position: absolute;
                top: 0;
                left:100%;

            }
        }
    }
    .f2{
        height: 170px;
        padding: 40px 0;
        display: grid;
        grid-template-columns: 976px 250px;
        grid-template-rows: 100%;
        .f2-l{
            display: grid;
            grid-template-columns: repeat(6,16.66%);
            grid-template-rows: 100%;
            ul{
                list-style: none;
                li{
                    margin-bottom: 5px;
                    font-size: 12px;
                    &:nth-child(1){
                        font-size: 14px;
                        // font-weight: bold;
                        margin-bottom: 26px;
                    }
                }
            }
        }
        .f2-r{
            img{
                vertical-align: top;
                width: 252px;
                height: 110.2px;
                border-left: 1px solid gainsboro;
            }
        }
    }





}

.f3{
    height: 203px;
    background-color: #fafafa;
    .f3-1{
        position: relative;
        height: 203px;
        width: 1226px;
        margin: auto;
        padding: 30px 0;
        img{
            width: 56px;
            height: 56px;
            vertical-align: top;
        }
        .f311{
            width: 1170px;
            height: 203px;
            position: absolute;
            font-size: 12px;
            top: 30px;
            left: 60px;
            p{
                &:nth-child(3),&:nth-child(4),&:nth-child(5),&:nth-child(6){
                    color: #dcdcdc;
                }
                span{
                    &:hover{
                        color: red;
                    }
                }
            }
        }
        .pic-111{
            display: flex;
            img{
                width: 83px;
                height: 28px;
            }
        }
        .f5{
            position: absolute;
            bottom: 30px;
            left: 400px;
            margin: auto;
            h5{

                font-size: 22px;
                color: gainsboro;
            }
        }
    }
}

